<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #nav_add{
            /* 100vw 1个屏幕的宽，100vh 1个屏幕的高 */
            width: 100vw;
            height: 100vh;
            /* 背景色；绝对定位；左0；顶0；层级900 */
            background-color: rgba(0,0,0,.3);
            position: absolute;
            left:0;
            top:0;
            z-index: 999;
        }
        #add_content{
            /* 宽；高；背景；绝对定位；left 50% ；顶50%； 自身宽50%高50% */
            width: 400px;
            height: 300px;
            background-color: #fff;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
        #add_content {
            text-align: center;
        }
        select {
            text-align: center;
            width: 50%;
            height: 100%;
            background-color: white;
        }
    </style>


    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script th:src="@{js/jquery.js}"></script>
<!--    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->


        <script>
        $.showMessage = function (flag, page) {
            let nav = [];
            if(flag === 0) {
                nav = ["ID", "保险名称", "价格", "描述", "类型", "状态"];
            }else if(flag === 1) {
                nav = ["ID", "基金名称", "类型", "风险等级", "基金经理", "状态", "描述", "价格"];
            }else {
                nav = ["ID", "股票名称", "描述", "价格", "状态", "风险等级", "类型"];
            }
            $.ajax({
                url: "showMessage",
                type: "post",
                data: {
                    "flag": flag,
                    "pageIndex": page
                },
                success: function (data) {
                    let str = "<thead><tr>"
                    for(let i = 0; i < nav.length; i++) {
                        str += "<th>" + nav[i] + "</th>";
                    }
                    str += "<th>上线/下线</th></tr></thead>";
                    let i = 0, j = 0;
                    str += "<tbody>"
                    for(i = 0; i < data.length; i++) {
                        str += "<tr>";
                        for(j = 0; j < nav.length; j++) {
                            str += "<td>" + data[i][j] + "</td>";
                        }
                        if(data[i][j] === "1") {
                            str += "<td><button class='layui-btn layui-btn-primary up' type='button' id='u"+ data[i][0] +"'>上线</button></td>";
                        }else if(data[i][j] === "0"){
                            str += "<td><button class='layui-btn layui-btn-primary down' type='button' id='d" + data[i][0] + "'>下线</button></td>"
                        }
                        // str += "<td><button class='layui-btn layui-btn-primary up' type='button' id='u"+ data[i][0] +"'>上线</button></td> <td><button class='layui-btn layui-btn-primary down' type='button' id='d" + data[i][0] + "'>下线</button></td>";
                        // str += "</tr>";

                    }
                    str += "</tbody>"
                    $("#message").html(str);
                    $("#add_product").show();
                }
            })
        }


        $.upProduct = function (flag, id, page) {
            $.ajax({
                url: "upProduct",
                type: "post",
                data: {
                    "flag": flag,
                    "id": id
                },
                success: function (data) {
                    if(data === true) {
                        alert("上线成功！");
                        $.showMessage(flag, page);
                    }else {
                        alert("已上线！");
                    }
                }
            })
        }


        $.downProduct = function (flag, id, page) {
            $.ajax({
                url: "downProduct",
                type: "post",
                data: {
                    "flag": flag,
                    "id": id
                },
                success: function (data) {
                    if(data === true) {
                        alert("下线成功！");
                        $.showMessage(flag, page);
                    }else {
                        alert("已下线！");
                    }
                }
            })
        }


        $.showPage = function (flag, page) {
            $.ajax({
                url: "getPageIndex",
                data: {
                    "flag": flag
                },
                type: "post",
                success: function (pages) {
                    let p = 0;
                    if(page > 5) {
                        p = page - 5;
                    }
                    let btns = "";
                    for(let pa = p; pa < pages && pa < p+10; pa++) {
                        btns += "<button type='button' class='layui-btn layui-btn-sm page'>"+ pa +"</button>";
                    }
                    $("#nav_page").html(btns);
                }
            })
        }


        $(function () {
            $("#nav_add").hide();
            $("#add_product").hide();

            //产品类型
            let flag = -1;
            //当前页码
            let page = 0;
            //总页码
            let pages = 0;


            //显示产品
            $("#in_flag").click(function () {
                flag = 0;
                page = 0;
                $.showMessage(flag, page);
                $.showPage(flag, page);
            })
            $("#fu_flag").click(function () {
                flag = 1;
                page = 0;
                $.showMessage(flag, page);
                $.showPage(flag, page);
            })
            $("#st_flag").click(function () {
                flag = 2;
                page = 0;
                $.showMessage(flag, page);
                $.showPage(flag, page);
            })


            //上线
            $(document).on('click', ".up", function(){
                $.upProduct(flag, $(this).attr("id").substring(1), page);
            })
            //下线
            $(document).on('click', ".down", function(){
                $.downProduct(flag, $(this).attr("id").substring(1), page);
            })


            //添加，弹出窗口
            $("#add_product").click(function () {
                $("#nav_add").show();
                let str = "";
                if(flag === 0) {
                    str += "<tr><td>保险名称</td><td><input type='text' id='p_name'></td></tr>";
                    str += "<tr><td>保险价格</td><td><input type='text' id='p_price'></td></tr>";
                    str += "<tr><td>保险描述</td><td><input type='text' id='p_description'></td></tr>";
                    str += "<tr><td>保险类型</td><td><select id='p_type'><option>医疗保险</option><option>人生保险</option><option>以外保险</option> </select></td></tr>";
                }else if(flag === 1) {
                    str += "<tr><td>基金名称</td> <td><input type='text' id='p_name'></td></tr>";
                    str += "<tr><td>基金经理</td> <td><input type='text' id='p_manager'></td></tr>";
                    str += "<tr><td>基金描述</td> <td><input type='text' id='p_description'></td></tr>";
                    str += "<tr><td>基金价格</td> <td><input type='text' id='p_price'></td></tr>";
                    str += "<tr><td>基金类型</td> <td><select id='p_type'><option>指数基金</option><option>货币基金</option><option>债券基金</option><option>混合基金</option> </select></td></tr>";
                    str += "<tr><td>基金风险等级</td> <td><select id='p_risk'><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option> </select></td></tr>";
                }else if(flag === 2) {
                    str += "<tr><td>股票名称</td><td><input type='text' id='p_name'></td></tr>";
                    str += "<tr><td>股票描述</td><td><input type='text' id='p_description'></td></tr>";
                    str += "<tr><td>股票价格</td><td><input type='text' id='p_price'></td></tr>";
                    str += "<tr><td>基金风险等级</td> <td><select id='p_risk'><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option> </select></td></tr>";
                    str += "<tr><td>股票类型</td><td><select id='p_type'><option>A股</option><option>B股</option><option>H股</option><option>S股</option> </select></td></tr>";
                }
                str += "<tr><td><input type='button' value='提交' id='add_submit' class='layui-btn layui-btn-sm'></td><td><input type='button' value='取消' id='add_cancel' class='layui-btn layui-btn-sm'></td></tr>";
                $("#add_content").html(str);
            })


            //取消添加
            $(document).on('click', "#add_cancel", function(){
                $("#nav_add").hide();
            })

            //确认添加
            $(document).on('click', "#add_submit", function(){
                let message = [];
                let temp = 0;
                if(flag === 0) {
                    if($("#p_name").val() === "" || $("#p_price").val() === "" || $("#p_description").val() === "") {
                        temp = 1;
                    }else {
                        message.push($("#p_name").val());
                        message.push($("#p_price").val());
                        message.push($("#p_description").val());
                        message.push($("#p_type option:selected").val());
                    }
                }else if(flag === 1) {
                    if($("#p_name").val() === "" || $("#p_price").val() === "" || $("#p_description").val() === "" || $("#p_manager").val() === "") {
                        temp = 1;
                    }else {
                        message.push($("#p_name").val());
                        message.push($("#p_type option:selected").val());
                        message.push($("#p_risk option:selected").val());
                        message.push($("#p_manager").val());
                        message.push($("#p_description").val());
                        message.push($("#p_price").val());
                    }
                }else if(flag === 2) {
                    if($("#p_name").val() === "" || $("#p_price").val() === "" || $("#p_description").val() === "") {
                        temp = 1;
                    }else {
                        message.push($("#p_name").val());
                        message.push($("#p_description").val());
                        message.push($("#p_price").val());
                        message.push($("#p_risk option:selected").val());
                        message.push($("#p_type option:selected").val());
                    }
                }
                if(temp === 0) {
                    $.ajax({
                        url: "addProduct",
                        type: "post",
                        data: {
                            flag: flag,
                            message: message
                        },
                        success: function (resp) {
                            if(resp === true) {
                                alert("添加成功!");
                            }else {
                                alert("添加失败!");
                            }
                        }
                    })
                    $.showMessage(flag, page);
                    $.showPage(flag, page);
                    $("#nav_add").hide();
                }else {
                    alert("请输入！");
                }
            })


            //显示具体页内容
            $(document).on("click", ".page", function () {
                page = $(this).text();
                $.showMessage(flag, page);
            })


        })
    </script>
</head>
<body>

    <div id="nav_mess">
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item" id="in_flag"><a>保险</a></li>
            <li class="layui-nav-item" id="fu_flag"><a>基金</a></li>
            <li class="layui-nav-item" id="st_flag"><a>股票</a></li>
            <li class="layui-nav-item"><a></a></li>
            <li class="layui-nav-item" id="add_product"><a>添加</a></li>
        </ul>
    </div>

    <div>
        <table class="layui-table" id="message" lay-size="sm">

        </table>

        <div class="layui-btn-container" id="nav_page">

        </div>
    </div>

    <div id="nav_add" >
        <table id="add_content">

        </table>
    </div>
</body>
</html>